﻿@{
	Layout = null;
	ViewData["Title"] = "排班计划";
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>排班计划</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
	<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

	<div class="layui-card" style="margin:20px;">
		<div class="layui-card-header">
			<div class="layui-form layui-form-pane" lay-filter="searchForm" style="padding: 10px 0;">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">计划名称</label>
						<div class="layui-input-inline">
							<input type="text" name="planName" placeholder="请输入计划名称" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<button class="layui-btn" lay-submit lay-filter="searchBtn">
							<i class="layui-icon">&#xe615;</i> 搜索
						</button>
						<button type="button" class="layui-btn layui-btn-primary" id="btnReset">重置</button>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-card-body">
			<div style="margin-bottom: 10px;">
				<button class="layui-btn" id="btnAdd">
					<i class="layui-icon">&#xe654;</i> 新增
				</button>
				<button class="layui-btn layui-btn-danger" id="btnBatchDelete">
					<i class="layui-icon">&#xe640;</i> 删除
				</button>
			</div>

			<!-- 数据表格 -->
			<table id="crewSchedulingTable" lay-filter="crewSchedulingTable"></table>
		</div>
	</div>

	<!-- 表格操作列模板 -->
	<script type="text/html" id="tableBar">
		<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script>
		layui.use(['table', 'form', 'layer', 'laydate'], function () {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var $ = layui.$;

			table.render({
				elem: '#crewSchedulingTable',
				url: '/CrewScheduling/ShowCrewScheduling',
				page: true,
				request: {
					pageName: 'pageIndex',
					limitName: 'pageSize'
				},
				parseData: function(res){
					return {
						"code": res.code,
						"msg": res.msg,
						"count": res.count,
						"data": res.data.map(function(d){
							d.startTime = new Date(d.startTime).toLocaleDateString();
							d.endTime = new Date(d.endTime).toLocaleDateString();
							return d;
						})
					};
				},
				cols: [[
					{type:'checkbox', fixed: 'left'},
					{field: 'planNumber', title: '计划编号', width: 200, sort: true},
					{field: 'planName', title: '计划名称', width: 150},
					{field: 'teamType', title: '班组类型', width: 120},
					{field: 'startTime', title: '开始日期', width: 120, sort: true},
					{field: 'endTime', title: '结束日期', width: 120, sort: true},
					{field: 'shiftWay', title: '轮班方式', width: 100},
					{field: 'productionWay', title: '倒班方式', width: 100},
					{field: 'documentStatus', title: '单据状态', width: 100},
					{title: '操作', toolbar: '#tableBar', width: 150, fixed: 'right'}
				]]
			});

			form.on('submit(searchBtn)', function(data){
				table.reload('crewSchedulingTable', {
					where: data.field,
					page: {
						curr: 1
					}
				});
				return false;
			});

			$('#btnReset').on('click', function () {
				$('input[name="planName"]').val('');
				form.render();
				table.reload('crewSchedulingTable', {
					where: { planName: '' },
					page: {
						curr: 1
					}
				});
			});

			$('#btnAdd').on('click', function(){
				openForm('新增排班计划', null);
			});

			function openForm(title, id) {
				var url = '/CrewScheduling/EditCrewSchedulingView';
				if(id){
					url += '?id=' + id;
				}

				layer.open({
					type: 2,
					title: title,
					area: ['800px', '90%'],
					content: url,
					end: function(){
						table.reload('crewSchedulingTable');
					}
				});
			}

			$('#btnBatchDelete').on('click', function(){
				var checkStatus = table.checkStatus('crewSchedulingTable');
				var data = checkStatus.data;
				if(data.length === 0){
					layer.msg('请至少选择一条数据', {icon: 0});
					return;
				}
				layer.confirm('确定要删除选中的 ' + data.length + ' 条数据吗？', { icon: 3, title: '提示' }, function(index){
					var ids = data.map(function(item){ return item.id; });
					$.ajax({
						url: '/CrewScheduling/DelCrewScheduling',
						type: 'DELETE',
						contentType: 'application/json',
						data: JSON.stringify(ids),
						success: function(res){
							layer.msg('删除成功', {icon: 1});
							table.reload('crewSchedulingTable');
						},
						error: function(){
							layer.msg('删除失败', {icon: 2});
						}
					});
					layer.close(index);
				});
			});

			table.on('tool(crewSchedulingTable)', function(obj){
				var data = obj.data;
				if(obj.event === 'del'){
					layer.confirm('确定删除此排班计划？', function(index){
						$.ajax({
							url: '/CrewScheduling/DelCrewScheduling',
							type: 'DELETE',
							contentType: 'application/json',
							data: JSON.stringify([data.id]),
							success: function(res){
								layer.msg('删除成功');
								obj.del();
							},
							error: function(){
								layer.msg('删除失败');
							}
						});
						layer.close(index);
					});
				} else if(obj.event === 'edit'){
					openForm('编辑排班计划', data.id);
				}
			});
		});
	</script>

</body>
</html>
